<template>
    <div class="user">
      <el-form
        ref="formInlineRef"
        :inline="true"
        :model="formInline"
        class="demo-form-inline"
      >
        <el-form-item prop="user">
          <el-input
            v-model="formInline.user"
            placeholder="请输入角色名称"
            clearable
          />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" :icon="Search" @click="getList()"
            >查询</el-button
          >
          <el-button @click="resetForm(formInlineRef)">清空</el-button>
        </el-form-item>
      </el-form>
      <!-- 添加按钮 -->
      <el-row>
        <el-button type="primary"  @click="toUserAdd">添加</el-button>
        <el-button type="danger" @click="delMore">批量删除</el-button>
      </el-row>
      <!-- 表格组件 -->
      <el-table
        :data="tableData"
        style="width: 100%"
        @selection-change="handleSelection"
      >
        <el-table-column type="selection" width="50" />
        <el-table-column type="index" label="序号" width="55" />
        <el-table-column prop="name" label="角色名称" />
        <el-table-column prop="code" label="角色code" />
        <el-table-column prop="description" label="角色描述" />
        <el-table-column prop="gmtCreate" label="创建时间" />
        <el-table-column prop="gmtModified" label="更新时间" />
        <el-table-column label="操作" width="260px" align="center">
          <template #default="scope">
            <el-button type="primary"  link @click="toUserAdd">添加</el-button>
            <el-button type="warning" link @click="toEdit(scope.row.id)"
              >编辑</el-button
            >
            <el-button type="danger" link @click="del(scope.row.id)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页组件 -->
      <el-config-provider :locale="locale">
        <el-pagination
          v-model:current-page="currentPage4"
          v-model:page-size="pageSize4"
          :page-sizes="[1, 5, 10, 20]"
          :small="small"
          :disabled="disabled"
          :background="background"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
          @size-change="getList"
          @current-change="getList"
        >
        </el-pagination>
      </el-config-provider>
    </div>
  </template>
  
  <script setup lang="ts">
  import { ElMessage, ElMessageBox } from "element-plus";
  import type { Action, FormInstance } from "element-plus";
  import { ref, reactive } from "vue";
  import { Search } from "@element-plus/icons-vue";
  import { useRouter } from "vue-router";
  //中文包
  import zhCn from "element-plus/es/locale/lang/zh-cn";
  import axios from "../../assets/js/axios";
  let locale = zhCn;
  
  const router = useRouter();
  const formInlineRef = ref<FormInstance>();
  
  const currentPage4 = ref(0);
  const pageSize4 = ref(10);
  const small = ref(false);
  const background = ref(true);
  const disabled = ref(false);
  const total = ref(0);
  
  //表单数据
  const formInline = reactive({
    user: "",
  });
  
  //表格数据
  const tableData = ref([]);
  //表格选择的数据
  const selectDate = ref<Array<any>>([]);
  //表格选择事件
  const handleSelection = (val: Array<any>) => {
    console.log(val);
    selectDate.value = val.map((item) => item.id);
  };
  
  //点击批量删除
  const delMore = () => {
    if (selectDate.value.length > 0) {
      //删除
      //弹出删除提示框
      ElMessageBox.alert("您确认删除吗？", "提示", {
        // if you want to disable its autofocus
        // autofocus: false,
        confirmButtonText: "确认",
        callback: (action: Action) => {
          console.log(action);
          if (action === "confirm") {
              axios.del("/serviceedu/edu-role/delMoreRole?ids="+selectDate.value,{}).then((res: any) => {
              if (res.code == 200) {
                ElMessage({
                  type: "success",
                  message: "删除角色成功",
                });
                getList()
              }
            });
          }
        },
      });
    } else {
      //提示
      ElMessage({
        message: "Congrats, this is a success message.",
        type: "success",
      });
    }
  };
  
  //点击删除
  const del = (id: number) => {
    //弹出消息提示弹窗
    ElMessageBox.alert("您确认删除吗？", "提示", {
      confirmButtonText: "确认",
      callback: (action: Action) => {
        console.log(action);
        if (action === "confirm") {
          axios.del("/serviceedu/edu-role/delRole/" + id, {}).then((res: any) => {
              if (res.code == 200) {
                ElMessage({
                  type: "success",
                  message: "删除角色成功",
                });
                getList()
              }
            });
        }
      },
    });
  };
  
  const resetForm = (formEl: FormInstance | undefined) => {
    if (!formEl) return;
    //调用表单重置方法
    formEl.resetFields();
    formInline.user=""
  };
  
  //点击添加按钮
  const toUserAdd = () => {
    //跳转角色添加页
    router.push("/ProleAdd");
  };
  //点击编辑
  const toEdit = (id: number) => {
    //跳转用户添加页
    router.push({ path: "/ProleAdd", query: { id: id } });
  };
  
  // 获取角色列表
  const getList = () => {
    axios
      .get("/serviceedu/edu-role/getPageBatchs", {
        page: currentPage4.value,
        size: pageSize4.value,
        name: formInline.user,
      })
      .then((res: any) => {
        total.value = res.data.total;
  
        tableData.value = res.data.list;
      });
  };
  getList();
  </script>
  
  <style lang="less" scoped>
  .demo-form-inline {
    .el-input {
      --el-input-width: 220px;
    }
  
    .el-select {
      --el-select-width: 220px;
    }
  }
  
  .el-table {
    margin: 30px 0;
  }
  </style>
  